@import '@/styles/variables.scss';

.enterPay-view {

  .el-dialog{
    .el-dialog__header{
      border-bottom: none;
    }
    .el-dialog__body{
      padding: 20px 80px;
    }
  }

  .content{

  }

  .modelView{
    display: flex;
    align-items: center;
    justify-content: space-between;


    .model-item{
      background-color: white;
      border: 1px solid #dfdfdf;
      box-shadow: 0 0 6px #dfdfdf;
      border-radius: $border-radius-4;
      width: 230px;
      position: relative;

      .desc{
        width: 0;
        height: 0;
        border-radius: 0 4px 0 0;
        border-bottom: 50px solid white;
        border-left: 50px solid white;
        position: absolute;
        bottom: 0;
        right: 0;
        z-index: 1;

        img{
          position: absolute;
          right: 5px;
          height: 20px;
          width: 20px;
          bottom: -45px;
        }
      }

      .model-header{

        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        border-radius: $border-radius-4 $border-radius-4 0 0;
        span{
          font-size: $nav-system-name;
        }

      }

      .model-center{
        padding: $collection-y*2 $collection-x*2;
        .function-item{
          display: flex;
          justify-content: space-between;
          padding-bottom: $block-y;
        }
        .function-item:last-child{
          padding-bottom: 0;
        }
      }

      .model-footer{
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        span{
          font-size: $nav-system-name;
        }
      }

      .red{
        background-color: $price-icon-color;

        .desc{
          border-bottom: 50px solid $price-icon-color;
        }
      }
      .orange{
        background-color: $assist-color2;

        .desc{
          border-bottom: 50px solid $assist-color2;
        }
      }
    }

    .activete{
      border-color: $main-color;
    }


  }

  .other-select-view{
    padding-top: 30px;

    .select-item{
      padding-bottom: 30px;
      display: flex;
      align-items: center;

      .select-title{
        width: 100px;
      }

      .price{
        color: $assist-color2;
        font-size: 22px;
      }
    }
  }

  .codeView{
    display: flex;
    justify-content: space-around;
    align-items: center;
    img{
      width: 200px;
      height: 200px;
    }
    p{
      font-size: $nav-system-name;
    }

    .titleTxt{
      display: flex;
      justify-content: center;
      img{
        width: 20px;
        height: 20px;
      }

      .aliTxt{
        color: #1676ff;
      }
      .wxTxt{
        color: #4bb316;
      }
    }
  }

}
